<template>
    <div 
    class="main"
    v-loading="wordLoading"
    >
        <div 
        class="left" 
        :class="{full: panToggle}"
        >
            <div class="tool-bar">
                <div class="l">
                    <el-button 
                    type="primary" 
                    size="small" 
                    @click="newFileHandler"
                    v-czc="['投标方案制作', '点击按钮' , '新建',0 ,'biddingfiletool-btn-newBuild']"
                    >
                        新建
                    </el-button>

                    <btn-open
                        :editing="isEditing"
                        :editreadonly="editingData.readonly"
                        @open="reloadHandler"
                        @reload="panReloadHandler"
                    ></btn-open>
                </div>

                <div class="r">
                    <template v-if="isEditing">
                        <el-button
                        v-if="!editingData.readonly"
                        class="btns"
                        type="success"
                        size="small"
                        @click="saveHandler"
                        >
                            保存
                        </el-button>

                        <el-button 
                        class="btns"
                        size="small"
                        @click="closeFileHandler"
                        >
                            关闭
                        </el-button>
                    </template>
                </div>
            </div>

            <div class="office">
                <client-only>
                    <word 
                        ref="word"
                        @ready="wordLoading = false"
                    ></word>
                </client-only>

                <cover-zbfile 
                    v-if="!isEditing"
                    @open="tbFileUpload"
                ></cover-zbfile>
            </div>
        </div>

        <div 
        v-if="panToggle"
        class="btn-openpan" 
        @click="togglePanHandler"
        v-czc="['投标方案制作', '点击按钮' , '折叠/展开云盘',0 ,'biddingfiletool-btn-ExpandCollapsePan']"
        >
            展开云盘
            <i class="el-icon-d-arrow-left icon-border"></i>
        </div>

        <div class="right" :class="{shrink: panToggle}">
            <div class="tool-bar">
                <el-button 
                v-if="!panToggle"
                class="btns"
                size="small" 
                type="primary" 
                style="width:100%;"
                @click="togglePanHandler"
                v-czc="['投标方案制作', '点击按钮' , '折叠/展开云盘',0 ,'biddingfiletool-btn-ExpandCollapsePan']"
                >
                    <i class="el-icon-d-arrow-right icon-border"></i>
                    折叠云盘
                </el-button>
            </div>

            <div class="inner">
                <client-only>
                    <pan
                        ref="pan"
                        @word="panEditWordHandler"
                        :lockguid="(editingData || {}).rowguid"
                    ></pan>
                </client-only>
            </div>
        </div>

        <dialog-newfile 
            v-model="newFileDialogVisible"
            @submit="createNewFile"
        ></dialog-newfile>

        <my-mask 
            :finish="endOfMack" 
            v-if="maskShow" 
            type="file">
        </my-mask>

        <div class="zhezhao" v-if="!isLogin">
            <div class="zhezhao-main">
                <div>进行投标方案制作，需要您先登录</div>
                <el-button size="medium"  @click="goLogin">登录</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import {buildTdk} from '@config/tdk';

import Word from './components/word';
import Pan from './pan/components/list';
import BtnOpen from './components/btn-open';
import CoverZbfile from './components/cover-zbfile';
import DialogNewfile from './components/dialog-newfile.vue';
import myMask from '@components/sys/mask/index.vue';

import storage from '@js/storage.js';
import beforePageLeave from '@js/beforePageLeave.js';

export default {
    head() {
        return buildTdk('biddingfiletool');
    },
    layout: 'client',
    components: {
        Word,
        Pan,
        BtnOpen,
        CoverZbfile,
        DialogNewfile,
        myMask,
    },
    data() {
        return {
            wordLoading: true,
            panToggle: false,   //不展开云盘
            isEditing: false,      //正在编辑
            editingData: false,
            newFileDialogVisible: false,
            maskShow:false,
            isLogin:true,
        };
    },
    methods: {
        checkIsEditing(cb) {
            if (this.isEditing && !this.editingData.readonly) {
                // 有文档在编辑中
                showConfirm('此操作将关闭当前文件，关闭前请先保存当前文件的内容，若未保存直接关闭，该文档内容可能不是最新内容', 'warning', () => {
                    cb();
                });

                return;
            }

            cb();
        },
        newFileHandler() {
            this.$store.dispatch('userinfo/checkIsLogin', () => {
                var handler = () => {
                    this.newFileDialogVisible = true;
                };

                this.checkIsEditing(handler);
            });
        },
        createNewFile(filename) {
            this.$post(`${this.$store.state.api.sysUrl}/file/bidding/plan/add.json`, {
                filename,
                typecode: 'qt',
            }, data => {
                showMsg('文件创建成功，可在云盘中访问');

                this.panReloadHandler();

                this.reloadHandler(data);
            });
        },
        closeFileHandler() {
            var handler = () => {
                this.$refs.word.destroy();
                this.editingData = false;
                this.isEditing = false;
            }

            this.checkIsEditing(handler);
        },
        reloadHandler(data) {
            var filesavepath = data.filesavepath,
                rowguid = data.rowguid,
                readonly = data.readonly,
                filename = data.filename;

            // this.$refs.word.reload(`${window.location.origin}${e}`);
            this.$refs.word.reload(filesavepath, filename, rowguid, readonly);

            this.editingData = {
                filesavepath,
                rowguid,
                readonly,
                filename,
            };

            setSession({
                file: this.editingData,
            });

            this.isEditing = true;
        },
        saveHandler() {
            this.$store.dispatch('userinfo/checkIsLogin', () => {
                this.$refs.word.saveHandler();
            });
        },
        togglePanHandler() {
            this.panToggle = !this.panToggle;
        },
        panEditWordHandler(data) {
            this.checkIsEditing(() => {
                this.reloadHandler(data);
            });
        },
        panReloadHandler() {
            this.$refs.pan.queryData();
        },
        tbFileUpload(data) {
            this.panReloadHandler();
            this.reloadHandler(data);
        },
        // 检测用户是否登录
        checkIsLogin() {
            const SERIAL_CODE = this.$cookies.get('SERIAL_CODE');

            if (!SERIAL_CODE) {
                return false;
            }
            return true;
        },
        endOfMack(){
            this.maskShow = false;
            storage.setLocal("fileMask","1")
        },
        goLogin() {
            this.$store.dispatch('global-dialog/showLogin')
        },
    },
    mounted() {
        this.isLogin = this.checkIsLogin();
        if (!this.isLogin) {
            return;
        }

        beforePageLeave.add(cb => {
            this.checkIsEditing(() => {
                cb && cb();
            }); 
        });

        const fileMask = storage.getLocal("fileMask");
        if(fileMask != "1"){
            this.maskShow = true;
        }
    },
    beforeDestroy() {
        beforePageLeave.remove();
    },
};
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';

    .main{
        width: 100%;
        height: 100%;
        display: flex;
        background: #F4F6F8; 

        .left{
            min-width: 914px;
            // 1103
            flex: 1;

            .tool-bar{
                margin-top: 16px;
                margin-bottom: 6px;
                overflow: hidden;

                .l{
                    float: left;
                }

                .r{
                    float: right;

                    .btns{
                        & + .btns{
                            margin-left: 6px;
                        }
                    }
                }
            }

            .office{
                height: calc(100% - 54px);
                position: relative;
                border: solid 1px #d5d5d5;
                box-sizing: border-box;
            }
        }

        .right{
            // $panWidth: 280px;
            $panWidth: 286px;

            // width: 280px;
            width: $panWidth;
            overflow: hidden;
            transition: .3s all;
            margin-left: 0;

            &.shrink{
                width: 0;
                margin-left: 20px;
            }

            .tool-bar{
                margin-top: 16px;
                margin-bottom: 6px;
                text-align: right;
                height: 32px;
            }

            .inner{
                width: $panWidth;
                height: calc(100% - 54px);
            }
        }

        .btn-openpan{
            width: 20px;
            background: $primaryColor;
            color: white;
            position: absolute;
            right: 0;
            top: 54px;
            cursor: pointer;
            display: flex;
            justify-items: initial;
            flex-flow: column;
            align-items: center;
            text-align: center;
            padding: 1em 0;

            &:hover{
                background: $primaryColor8;
            }

            .icon-border{
                margin-top: .5em;
            }
        }

        .icon-border{
            border: 1px solid white;
            border-radius: 50%;
        }

        .zhezhao{
            width: 100%;
            height: 100%;
            background: rgba($color: #000000, $alpha: 0.35);
            position: absolute;
            z-index: 999;

            .zhezhao-main {
                width: 500px;
                height: 150px;
                margin: 200px  auto;
                background-color: #F4F6F8;
                border: 1px solid  rgba(0, 0, 0, 0.017);
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding: 15px 0;

                .el-button {
                    width: 116px;
                    height: 32px;
                    margin-top: 40px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background-color: #ff9f3b;
                    color: #fff;
                }
            }
        }
    }
</style>